import React, { Component } from 'react';
import { formatMessage } from 'umi-plugin-react/locale';
import { Form, Input, Button, Upload, Icon, Row, Col, Radio, message, Switch, Menu, Modal, Tooltip, Divider } from 'antd';
import { ChromePicker } from 'react-color';
import styles from '../index.less';
import Editor from '@/utils/Editor';
import LeftStyles from '@/pages/Account/accessSettings/index.less';
import {
  getSiteTagList,
  postSiteTagAdd,
  postsiteTagEdit,
  postSiteTagDel,
  postSiteTagMove,
  getSiteTagQuestionList,
  postSiteTagQuestionAdd,
  postSiteTagQuestionEdit,
  postSiteTagQuestionDel,
  postSiteTagQuestionMove,
  getSiteTagQuestionInfo,
} from '@/services/geographic';

import winSizeBig from '@/assets/accessSettings/默认大窗口.png';
import winSizeSmall from '@/assets/accessSettings/默认小窗口.png';

const CustomRadio = ({
  id = null,
  name = null,
  value = null,
  content = null,
  valueKey = null,
  labelStyle = {},
  assistStyle = {},
  onChange = null,
}) => {
  const handleChange = (e) => {
    if (onChange) {
      onChange(value);
    }
  };

  return (
    <label className={styles.labelWrapper} style={labelStyle} onChange={handleChange}>
      <input type='radio' id={id} name={name} value={value} checked={valueKey == value} />
      <div>
        <span>{content}</span>

        {id == 'style1' ? <span className={styles.style1} style={{ background: valueKey == value ? '#3E5BFF' : '#E5E5E5' }}></span> : null}
        {id == 'style2' ? <span className={styles.style2} style={{ background: valueKey == value ? '#3E5BFF' : '#E5E5E5' }}></span> : null}
        {id == 'style3' ? <span className={styles.style3} style={{ background: valueKey == value ? '#3E5BFF' : '#E5E5E5' }}></span> : null}
      </div>
    </label>
  );
};

class LeftAppearance extends Component {
  constructor(props) {
    super(props);
    this.state = {
      headPath: '',
      userHeadImg: '',
      kefuHeadImg: '',
      displayColorPicker: false,
      webWinColor: '#169bd5',
      winLogo: '',
      entranceLogo: '',
      id: '',
      rightMessage: '',
      leftTagTree: [],
      siteTagVisible: false,
      siteTagQuestionVisible: false,
      tagId: '',
      tagName: '',
      selected: [],
      problemsLink: 1,
      questionName: '',
      linkName: '',
      linkHrefName: '',
      questionId: '',
      questionMove: {
        id: '',
      },
      questionIndex: '',
      questionList: [],
      bubbleStyle: 1,
      winColor: '#169bd5',
      loginLogo: '',
    };
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this);
    }
  }

  initData = (data) => {
    let { voiceType } = this.state;
    let obj = {
      robotNickname: data.robotNickname,
      solveFlag: data.solveFlag,
      showFlag: data.showFlag,
      isSimilar: data.isSimilar,
      winSize: data.winSize,
      voiceEnable: data.voiceEnable,
      sideShow: data.sideShow,
      style: data.bubbleStyle ? data.bubbleStyle : '1',
      voiceEnable: data.voiceEnable,
      isSimilar: data.isSimilar,
      winTitle: data.winTitle,
      loginHeadline: data.loginHeadline,
      loginSubtitle: data.loginSubtitle,
      loginDescription: data.loginDescription,
    };
    if (data.voiceList) {
      data.voiceList.map((item) => {
        if (item.voiceType == 0) {
          obj.wxAppId = item.appId;
          obj.wxAppKey = item.appKey;
          voiceType.wxAppId = item.appId;
          voiceType.wxAppKey = item.appKey;
        }
        if (item.voiceType == 1) {
          obj.qyWxAppId = item.appId;
          obj.qyWxAppKey = item.appKey;
          voiceType.qyWxAppId = item.appId;
          voiceType.qyWxAppKey = item.appKey;
        }
      });
    }

    this.setState(
      {
        webWinColor: data.webWinColor,
        winLogo: data.winLogo,
        headPath: data.headPath,
        userHeadImg: data.userHeadImg,
        kefuHeadImg: data.kefuHeadImg,
        rightMessage: data.rightMessage,
        bubbleStyle: data.bubbleStyle ? data.bubbleStyle : '1',
        voiceSetUp: data.voiceList && data.voiceList.length > 0 ? true : false,
        voiceType,
        winColor: data.winColor ? data.winColor : '#169bd5',
        loginLogo: data.loginLogo,
      },
      () => {
        this.props.form.setFieldsValue(obj);
        this.getSiteTag();
      }
    );
  };

  normFile = (e) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  handleChangeImage = (file, type) => {
    if (file.file.status === 'done') {
      this.setState({
        [type]: file.file.response.url,
      });
    }
  };

  /**
   * 上传图片前判断
   * @returns {*}
   */
  beforeUpload = (file) => {
    let b = /\.(png|jpg|gif)$/;
    let a = file.name.toLowerCase();

    const pig = b.test(a);
    const isJPG = file.type;
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!pig) {
      if (!isLt2M) {
        message.error(formatMessage({ id: 'appearanceSettings.left.uploadImageSizeError' }));
      } else {
        message.error(formatMessage({ id: 'appearanceSettings.left.uploadImageFormatError' }));
      }
    } else {
      if (!isLt2M) {
        message.error(formatMessage({ id: 'appearanceSettings.left.uploadImageSizeError' }));
      }
    }
    return isJPG && isLt2M && pig;
  };

  handleColorPick = () => {
    let { displayColorPicker } = this.state;
    this.setState({
      displayColorPicker: !displayColorPicker,
    });
  };

  /**
   * 获取表单数据
   * @returns {*}
   */
  getFormData = () => {
    const { form, isllmCustom } = this.props;
    let info = form.getFieldsValue();
    info.rightMessage = isllmCustom == 1 ? null : this.ueditor.getUeditorContent();
    return info;
  };

  /**
   * 侧边栏-标签列表
   */
  getSiteTag = async () => {
    const { applicationId } = this.props;
    const { selected } = this.state;
    let id = selected.length > 0 ? selected[0].split('-')[0] : null;
    let res = await getSiteTagList({ robotId: applicationId });
    // console.log(res);
    if (res) {
      let tagIds = res.map((e) => e.id);
      this.setState(
        {
          leftTagTree: res,
          selected: id ? [id + '-' + tagIds.indexOf(id)] : res.length > 0 ? [res[0].id + '-0'] : [],
          tagId: id ? id : res.length > 0 ? res[0].id : null,
        },
        () => this.getQuestionList()
      );
    }
  };

  addSiteTag = () => {
    this.setState({ siteTagVisible: true, tagId: null });
  };

  siteTagCancel = () => {
    this.setState({ siteTagVisible: false, tagName: '' });
  };

  addTag = (e) => {
    this.setState({ tagName: e.target.value });
  };

  editTag = (item) => {
    this.setState({
      tagName: item.tagName,
      tagId: item.id,
      siteTagVisible: true,
    });
  };

  siteTagDel = async () => {
    const { selected } = this.state;
    let res = await postSiteTagDel({ id: selected[0].split('-')[0] });
    console.log(res);
    if (res.msg == formatMessage({ id: 'appearanceSettings.left.operationSuccess' })) {
      message.info(res.msg);
      this.setState({ selected: [] }, () => this.getSiteTag());
    }
  };

  tagMove = async (type) => {
    const { leftTagTree, selected } = this.state;
    if (leftTagTree.length == 0) {
      message.error(formatMessage({ id: 'appearanceSettings.left.noDataCannotMove' }));
      return false;
    }
    let tagIds = leftTagTree.map((e) => e.id);
    let id = selected[0].split('-')[0];
    let index = tagIds.indexOf(id);
    if (index == 0 && !type) {
      message.error(formatMessage({ id: 'appearanceSettings.left.alreadyFirstPosition' }));
      return false;
    } else if (index == tagIds.length - 1 && type) {
      message.error(formatMessage({ id: 'appearanceSettings.left.alreadyLastPosition' }));
      return false;
    }
    let obj = { id, targetId: type ? tagIds[index + 1] : tagIds[index - 1] };
    let res = await postSiteTagMove(obj);
    console.log(res);
    if (res.msg == formatMessage({ id: 'appearanceSettings.left.operationSuccess' })) {
      message.info(res.msg);
      this.getSiteTag();
    }
  };

  menuSelect = (item) => {
    this.setState({ selected: [item.key], tagId: item.key.split('-')[0] }, () => this.getQuestionList(true));
  };

  tagSubmit = async () => {
    const { tagName, tagId } = this.state;
    const { applicationId } = this.props;
    let res = { data: false, msg: formatMessage({ id: 'appearanceSettings.left.operationFailed' }) };
    if (tagId) {
      res = await postsiteTagEdit({ id: tagId, tagName });
    } else {
      res = await postSiteTagAdd({ applicationId, tagName });
    }
    console.log(res);
    if (res.msg == formatMessage({ id: 'appearanceSettings.left.operationSuccess' })) {
      message.info(res.msg);
      this.siteTagCancel();
      this.getSiteTag();
    }
  };

  // 标签-问题
  getQuestionList = async (type) => {
    const { tagId, questionMove } = this.state;
    let id = questionMove.id == '' ? null : questionMove.id;
    let res = await getSiteTagQuestionList({ tagId });
    // console.log(res);
    if (res) {
      let idLists = res.map((e) => e.id);
      this.setState({
        questionList: res,
        questionIndex: type ? 1 : id ? idLists.indexOf(id) + 1 : 1,
        questionMove: {
          id: type ? (res.length > 0 ? res[0].id : null) : id ? id : res.length > 0 ? res[0].id : null,
        },
      });
    }
  };

  addTagQuestion = () => {
    this.setState({ siteTagQuestionVisible: true, questionId: null });
  };

  editTagQuestion = async (item) => {
    let res = await getSiteTagQuestionInfo({ id: item.id });
    console.log(res);
    if (res) {
      if (res.contentType == 1) {
        this.setState({
          questionId: res.id,
          problemsLink: res.contentType,
          questionName: res.content,
          siteTagQuestionVisible: true,
        });
      } else if (res.contentType == 2) {
        this.setState({
          questionId: res.id,
          problemsLink: res.contentType,
          linkName: res.content,
          linkHrefName: res.linkUrl,
          siteTagQuestionVisible: true,
        });
      }
    }
  };

  delTagQuestion = async (item) => {
    let res = await postSiteTagQuestionDel({ id: item.id });
    console.log(res);
    if (res.msg == formatMessage({ id: 'appearanceSettings.left.operationSuccess' })) {
      message.info(res.msg);
      this.getQuestionList();
    }
  };

  questionItem = (item) => {
    this.setState({
      questionMove: {
        id: item.target.data.id,
      },
      questionIndex: item.target.value,
    });
  };

  questionMove = async (type) => {
    let { questionList, questionMove } = this.state;
    if (questionList.length == 0) {
      message.error(formatMessage({ id: 'appearanceSettings.left.noDataCannotMove' }));
      return false;
    }
    let questionIds = questionList.map((e) => e.id);
    let id = questionMove.id;
    let index = questionIds.indexOf(id);
    if (index == 0 && !type) {
      message.error(formatMessage({ id: 'appearanceSettings.left.alreadyFirstPosition' }));
      return false;
    } else if (index == questionIds.length - 1 && type) {
      message.error(formatMessage({ id: 'appearanceSettings.left.alreadyLastPosition' }));
      return false;
    }
    let obj = {
      id,
      targetId: type ? questionIds[index + 1] : questionIds[index - 1],
    };
    let res = await postSiteTagQuestionMove(obj);
    console.log(res);
    if (res.msg == formatMessage({ id: 'appearanceSettings.left.operationSuccess' })) {
      message.info(res.msg);
      this.getQuestionList();
    }
  };

  siteTagQuestionCancel = () => {
    this.setState({
      siteTagQuestionVisible: false,
      problemsLink: 1,
      questionName: '',
      linkName: '',
      linkHrefName: '',
    });
  };

  addQuestion = (e) => {
    this.setState({ questionName: e.target.value });
  };

  addLink = (e) => {
    this.setState({ linkName: e.target.value });
  };

  addLinkHref = (e) => {
    this.setState({ linkHrefName: e.target.value });
  };

  siteTagQuestionSubmit = async () => {
    const { problemsLink, tagId, questionName, linkName, linkHrefName, questionId } = this.state;
    let obj = null;
    if (problemsLink == 1) {
      obj = {
        tagId,
        contentType: problemsLink,
        content: questionName,
      };
    } else if (problemsLink == 2) {
      obj = {
        tagId,
        contentType: problemsLink,
        content: linkName,
        linkUrl: linkHrefName,
      };
    }
    let res = { data: false, msg: formatMessage({ id: 'appearanceSettings.left.operationFailed' }) };
    if (questionId) {
      obj.id = questionId;
      obj.tagId = undefined;
      res = await postSiteTagQuestionEdit(obj);
    } else {
      res = await postSiteTagQuestionAdd(obj);
    }
    console.log(res);
    if (res.msg == formatMessage({ id: 'appearanceSettings.left.operationSuccess' })) {
      message.info(res.msg);
      this.siteTagQuestionCancel();
      this.getQuestionList();
    }
  };

  isQuestion = (e) => {
    this.setState({ problemsLink: e.target.value });
  };

  // rgba转16进制
  rgbToHex = (val) => {
    //RGB(A)颜色转换为HEX十六进制的颜色值
    var r,
      g,
      b,
      a,
      A,
      regRgba = /rgba?\((\d{1,3}),(\d{1,3}),(\d{1,3})(,([.\d]+))?\)/, //判断rgb颜色值格式的正则表达式，如rgba(255,20,10,.54)
      rsa = val.replace(/\s+/g, '').match(regRgba);
    if (!!rsa) {
      r = parseInt(rsa[1]).toString(16);
      r = r.length == 1 ? '0' + r : r;
      g = (+rsa[2]).toString(16);
      g = g.length == 1 ? '0' + g : g;
      b = (+rsa[3]).toString(16);
      b = b.length == 1 ? '0' + b : b;
      a = +(rsa[5] ? rsa[5] : 1) * 100;
      A = +(rsa[5] ? rsa[5] : 1) * 100;
      return { hex: '#' + r + g + b, r: parseInt(r, 16), g: parseInt(g, 16), b: parseInt(b, 16), alpha: Math.ceil(a) };
    } else {
      return { hex: formatMessage({ id: 'appearanceSettings.left.invalid' }), alpha: 100 };
    }
  };
  rgbaToHexColor(rgbaArray, alphaMaxVal = 1) {
    //补位警号
    return (
      '#' +
      rgbaArray
        .map((chanel, index) => {
          let hexNum = '';
          if (index === 3) {
            //这是alpha通道
            hexNum = Number(Math.round((chanel * 255) / alphaMaxVal)).toString(16);
          } else {
            //普通通道直接转换
            hexNum = Number(chanel).toString(16);
          }
          return hexNum.length === 1 ? '0' + hexNum : hexNum; //这里解决了部分通道数字小于10的情况进行补位
        })
        .join('')
    );
  }

  handleColorPickWin = () => {
    let { displayColorPickerWin } = this.state;
    this.setState({
      displayColorPickerWin: !displayColorPickerWin,
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 3 },
      wrapperCol: { span: 21 },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 22,
          offset: 2,
        },
      },
    };
    const {
      headPath,
      userHeadImg,
      kefuHeadImg,
      displayColorPicker,
      webWinColor,
      winLogo,
      entranceLogo,
      rightMessage,
      selected,
      leftTagTree,
      questionList,
      siteTagVisible,
      problemsLink,
      siteTagQuestionVisible,
      bubbleStyle,
      displayColorPickerWin,
      winColor,
      loginLogo,
    } = this.state;
    const FormItemLayont = {
      labelCol: {
        sm: 24,
        md: 3,
      },
      wrapperCol: {
        sm: 24,
        md: 19,
      },
    };
    const tipsStyle = {
      fontSize: '13px',
      fontWeight: '400',
      color: 'rgba(51,51,51,0.5)',
      marginLeft: 5,
    };
    const { moduleList, channel, loginType } = this.props;

    return (
      <div className={styles.appearance_settings}>
        <Form {...formItemLayout}>
          <Form.Item label={formatMessage({ id: 'appearanceSettings.left.windowTitle' })}>
            {getFieldDecorator('winTitle', {
              rules: [{ required: true, message: formatMessage({ id: 'appearanceSettings.left.enterWindowTitle' }) }],
            })(<Input placeholder={formatMessage({ id: 'appearanceSettings.left.enterWindowTitle' })} style={{ width: 300 }} />)}
          </Form.Item>
          {this.props.isllmCustom == 1 ? null : (
            <>
              <Form.Item label={formatMessage({ id: 'appearanceSettings.left.windowColor' })}>
                <div className={styles.flexColor}>
                  <div className={styles.winColorBox}>
                    <div style={{ background: winColor }} className={styles.webWinColor} onClick={this.handleColorPickWin} />
                    <span>{winColor}</span>
                  </div>
                  {displayColorPickerWin ? (
                    <div style={{ position: 'relative', zIndex: '2' }}>
                      <div
                        style={{
                          position: 'fixed',
                          top: '0px',
                          right: '0px',
                          bottom: '0px',
                          left: '0px',
                        }}
                        onClick={this.handleColorPickWin}
                      />
                      <ChromePicker
                        color={winColor}
                        onChangeComplete={(color) => {
                          this.setState({
                            winColor: this.rgbaToHexColor([color.rgb.r, color.rgb.g, color.rgb.b, color.rgb.a]),
                          });
                        }}
                      />
                    </div>
                  ) : null}
                </div>
              </Form.Item>
            </>
          )}
          <Form.Item label={formatMessage({ id: 'appearanceSettings.left.windowLogo' })}>
            {getFieldDecorator('winLogo', { valuePropName: 'url', getValueFromEvent: this.normFile })(
              <Upload
                name='file'
                listType='picture'
                showUploadList={false}
                action='/cloud/file/upload'
                beforeUpload={this.beforeUpload}
                onChange={(info) => this.handleChangeImage(info, 'winLogo')}
                accept='.png,.jpg'
              >
                <img src={winLogo} alt='file' className={styles.avator} style={{ width: 'unset', maxHeight: 40, maxWidth: '140px' }} />
                <Button size={'small'}>{formatMessage({ id: 'appearanceSettings.left.chooseFile' })}</Button>
              </Upload>
            )}
            <span style={tipsStyle}>{formatMessage({ id: 'appearanceSettings.left.windowLogoSizeTip' })}</span>
          </Form.Item>
          <Form.Item label={formatMessage({ id: 'appearanceSettings.left.robotAvatar' })}>
            {getFieldDecorator('headPath', { valuePropName: 'url', getValueFromEvent: this.normFile })(
              <Upload
                name='file'
                listType='picture'
                showUploadList={false}
                action='/cloud/file/upload'
                beforeUpload={this.beforeUpload}
                onChange={(info) => this.handleChangeImage(info, 'headPath')}
                accept='.png,.jpg'
              >
                <img src={headPath} alt='file' className={styles.avator} />
                <Button size={'small'}>{formatMessage({ id: 'appearanceSettings.left.chooseFile' })}</Button>
              </Upload>
            )}
            <span style={tipsStyle}>{formatMessage({ id: 'appearanceSettings.left.channelNativeInvalidTip' })}</span>
          </Form.Item>
          {this.props.isllmCustom == 1 ? (
            <>
              <Form.Item label={formatMessage({ id: 'appearanceSettings.left.userAvatar' })}>
                {getFieldDecorator('userHeadImg', { valuePropName: 'url', getValueFromEvent: this.normFile })(
                  <Upload
                    name='file'
                    listType='picture'
                    showUploadList={false}
                    action='/cloud/file/upload'
                    beforeUpload={this.beforeUpload}
                    onChange={(info) => this.handleChangeImage(info, 'userHeadImg')}
                    accept='.png,.jpg'
                  >
                    <img src={userHeadImg} alt='file' className={styles.avator} />
                    <Button size={'small'}>{formatMessage({ id: 'appearanceSettings.left.chooseFile' })}</Button>
                  </Upload>
                )}
                <span style={tipsStyle}>{formatMessage({ id: 'appearanceSettings.left.customerAvatarTips' })}</span>
              </Form.Item>
            </>
          ) : null}
          {moduleList.indexOf('kefu') > -1 ? (
            <Form.Item label={formatMessage({ id: 'appearanceSettings.left.customerServiceAvatar' })}>
              {getFieldDecorator('kefuHeadImg', { valuePropName: 'url', getValueFromEvent: this.normFile })(
                <Upload
                  name='file'
                  listType='picture'
                  showUploadList={false}
                  action='/cloud/file/upload'
                  beforeUpload={this.beforeUpload}
                  onChange={(info) => this.handleChangeImage(info, 'kefuHeadImg')}
                  accept='.png,.jpg'
                >
                  <img src={kefuHeadImg} alt='file' className={styles.avator} />
                  <Button size='small'>{formatMessage({ id: 'appearanceSettings.left.chooseFile' })}</Button>
                </Upload>
              )}
              <span style={tipsStyle}>{formatMessage({ id: 'appearanceSettings.left.customerServiceAvatarTips' })}</span>
            </Form.Item>
          ) : (
            ''
          )}
          {this.props.isllmCustom == 1 ? null : (
            <>
              <Form.Item label={formatMessage({ id: 'appearanceSettings.left.bubbleStyle' })}>
                {getFieldDecorator('style', {
                  initialValue: '1',
                  valuePropName: 'checked',
                  rules: [
                    {
                      required: true,
                      message: formatMessage({ id: 'appearanceSettings.left.selectBubbleStyle' }),
                    },
                  ],
                })(
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <CustomRadio
                      {...{
                        id: 'style1',
                        name: 'style',
                        value: '1',
                        content: formatMessage({ id: 'appearanceSettings.left.bubbleStyle.droplet' }),
                        valueKey: `${bubbleStyle}`,
                        onChange: (res) => {
                          this.setState({ bubbleStyle: res });
                        },
                      }}
                    />
                    <CustomRadio
                      {...{
                        id: 'style2',
                        name: 'style',
                        value: '2',
                        content: formatMessage({ id: 'appearanceSettings.left.bubbleStyle.bubble' }),
                        valueKey: `${bubbleStyle}`,
                        onChange: (res) => {
                          this.setState({ bubbleStyle: res });
                        },
                      }}
                    />
                    <CustomRadio
                      {...{
                        id: 'style3',
                        name: 'style',
                        value: '3',
                        content: formatMessage({ id: 'appearanceSettings.left.bubbleStyle.square' }),
                        valueKey: `${bubbleStyle}`,
                        onChange: (res) => {
                          this.setState({ bubbleStyle: res });
                        },
                      }}
                    />
                    <span style={tipsStyle}>{formatMessage({ id: 'appearanceSettings.left.channelNativePageTip' })}</span>
                  </div>
                )}
              </Form.Item>
              <Form.Item label={formatMessage({ id: 'appearanceSettings.left.inputBubbleColor' })}>
                <div className={styles.flexColor}>
                  <div className={styles.winColorBox}>
                    <div style={{ background: webWinColor }} className={styles.webWinColor} onClick={this.handleColorPick} />
                    <span>{webWinColor}</span>
                    <span style={tipsStyle}>{formatMessage({ id: 'appearanceSettings.left.channelNativePageTip' })}</span>
                  </div>
                  {displayColorPicker ? (
                    <div style={{ position: 'relative', zIndex: '2' }}>
                      <div
                        style={{
                          position: 'fixed',
                          top: '0px',
                          right: '0px',
                          bottom: '0px',
                          left: '0px',
                        }}
                        onClick={this.handleColorPick}
                      />
                      <ChromePicker
                        color={webWinColor}
                        onChangeComplete={(color) => {
                          this.setState({
                            webWinColor: this.rgbaToHexColor([color.rgb.r, color.rgb.g, color.rgb.b, color.rgb.a]),
                          });
                        }}
                      />
                    </div>
                  ) : null}
                </div>
              </Form.Item>
            </>
          )}
          {/* {channel === 'PURE_WEB' ? (
            ''
          ) : (
            <Form.Item label={formatMessage({ id: 'appearanceSettings.left.voiceInput' })}>
              {getFieldDecorator('voiceEnable', { valuePropName: 'checked' })(<Switch />)}
              <span style={tipsStyle}>{formatMessage({ id: 'appearanceSettings.left.channelNativePageTip' })}</span>
            </Form.Item>
          )} */}

          {/* <Form.Item label={formatMessage({ id: 'appearanceSettings.left.inputAssociation' })}>
            {getFieldDecorator('isSimilar', { valuePropName: 'checked' })(<Switch />)}
            <span style={tipsStyle}>{formatMessage({ id: 'appearanceSettings.left.channelNativePageTip' })}</span>
          </Form.Item> */}
          {this.props.isllmCustom == 1 ? null : (
            <>
              <Divider style={{ marginTop: 0 }} />
              <span className={styles.titlep} style={{ background: 'unset', padding: '0 10px' }}>
                <span>{formatMessage({ id: 'appearanceSettings.left.pcAppearance' })}</span>
              </span>
              <Form.Item label={formatMessage({ id: 'appearanceSettings.left.defaultWindowSize' })}>
                <div className={styles.winSize}>
                  <img src={winSizeBig} />
                  <img style={{ marginLeft: 20 }} src={winSizeSmall} />
                </div>
                {getFieldDecorator('winSize')(
                  <Radio.Group>
                    <Radio style={{ marginLeft: 24, marginTop: 10 }} value={1}>
                      {formatMessage({ id: 'appearanceSettings.left.largeWindow' })}
                    </Radio>
                    <Radio style={{ marginLeft: 35, marginTop: 10 }} value={2}>
                      {formatMessage({ id: 'appearanceSettings.left.smallWindow' })}
                    </Radio>
                  </Radio.Group>
                )}
              </Form.Item>
              <Form.Item label={formatMessage({ id: 'appearanceSettings.left.sidebarDisplayStatus' })}>
                {getFieldDecorator('sideShow', {
                  valuePropName: 'checked',
                  initialValue: true,
                })(
                  <Switch
                    checkedChildren={formatMessage({ id: 'appearanceSettings.left.enable' })}
                    unCheckedChildren={formatMessage({ id: 'appearanceSettings.left.disable' })}
                  />
                )}
                <span className={styles.logoTips} style={{ marginLeft: 10 }}>
                  {formatMessage({ id: 'appearanceSettings.left.sidebarEnableTip' })}
                </span>
              </Form.Item>
              <Form.Item className='antZdy' label={formatMessage({ id: 'appearanceSettings.left.sidebarInfoDisplay' })}>
                <Form.Item>
                  <div style={{ width: '520px' }}>
                    <Editor content={rightMessage} name='content' id='content' width='275' ref={(r) => (this.ueditor = r)} zIndex={2} />
                  </div>
                </Form.Item>
              </Form.Item>
              <Form.Item label={formatMessage({ id: 'appearanceSettings.left.sidebarLinksQuestions' })}>
                <div className={LeftStyles.siteTag}>
                  <div style={{ width: '180px' }}>
                    <Menu
                      theme='light'
                      mode='inline'
                      onClick={(item) => this.menuSelect(item)}
                      selectedKeys={selected}
                      style={{
                        height: '100%',
                        minHeight: '335px',
                        position: 'relative',
                      }}
                    >
                      {leftTagTree.map((treeItem, index) => {
                        return (
                          <Menu.Item key={treeItem.id + '-' + index} id={treeItem.id} name={treeItem.tagName}>
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                              <span>{treeItem.tagName}</span>
                              <div>
                                <img src={staticPath + '/appImg/edit.png'} onClick={(e) => this.editTag(treeItem)} />
                              </div>
                            </div>
                          </Menu.Item>
                        );
                      })}
                      <div style={{ height: '24px', lineHeight: '24px', padding: '0 16px' }}>
                        <span style={{ color: '#3E5BFF', cursor: 'pointer' }} onClick={this.addSiteTag}>
                          {formatMessage({ id: 'appearanceSettings.left.addTag' })}
                        </span>
                      </div>
                      <div className={LeftStyles.tagBottom}>
                        <Button type='link' onClick={() => this.tagMove(false)}>
                          {formatMessage({ id: 'appearanceSettings.left.moveUp' })}
                        </Button>
                        <Button type='link' onClick={() => this.tagMove(true)}>
                          {formatMessage({ id: 'appearanceSettings.left.moveDown' })}
                        </Button>
                        <Button type='link' onClick={this.siteTagDel}>
                          {formatMessage({ id: 'appearanceSettings.left.delete' })}
                        </Button>
                      </div>
                    </Menu>
                  </div>
                  <div className={LeftStyles.rightQuestionList}>
                    <div className={LeftStyles.content}>
                      <Radio.Group style={{ width: '100%' }} onChange={this.questionItem} value={this.state.questionIndex}>
                        {questionList.map((item, index) => {
                          return (
                            <Radio key={index} value={index + 1} style={{ display: 'block' }} data={item}>
                              <span style={{ marginBottom: 0, lineHeight: '48px' }}>
                                <span className={LeftStyles.questionListName}>
                                  {item.contentType == 1 ? <Icon type='question-circle' /> : ''}
                                  {item.contentType == 2 ? <Icon type='link' /> : ''}
                                  <span className={LeftStyles.questionListText}>{item.content}</span>
                                </span>
                                <img
                                  src={staticPath + '/appImg/remove.png'}
                                  onClick={(e) => this.delTagQuestion(item)}
                                  className={LeftStyles.siteTagIcon}
                                />
                                <img
                                  src={staticPath + '/appImg/edit.png'}
                                  onClick={(e) => this.editTagQuestion(item)}
                                  className={LeftStyles.siteTagIcon}
                                />
                              </span>
                            </Radio>
                          );
                        })}
                      </Radio.Group>
                      <div className={LeftStyles.tagBottomRight}>
                        <img src={staticPath + '/appImg/top.png'} style={{ marginRight: 16 }} onClick={() => this.questionMove(false)} />
                        <img src={staticPath + '/appImg/down.png'} style={{ marginRight: 16 }} onClick={() => this.questionMove(true)} />
                        <img src={staticPath + '/appImg/add.png'} style={{ marginRight: 16 }} onClick={this.addTagQuestion} />
                      </div>
                    </div>
                  </div>
                </div>
              </Form.Item>
            </>
          )}

          {loginType == 1 ? (
            <div>
              <Divider style={{ marginTop: 0 }} />
              <span className={styles.titlep} style={{ background: 'unset', padding: '0 10px' }}>
                <span>{formatMessage({ id: 'appearanceSettings.left.pcAppearance' })}</span>
              </span>
              <Form.Item label={formatMessage({ id: 'appearanceSettings.left.loginLogo' })}>
                {getFieldDecorator('loginLogo', { valuePropName: 'url', getValueFromEvent: this.normFile })(
                  <Upload
                    name='file'
                    listType='picture'
                    showUploadList={false}
                    action='/cloud/file/upload'
                    beforeUpload={this.beforeUpload}
                    onChange={(info) => this.handleChangeImage(info, 'loginLogo')}
                    accept='.png,.jpg'
                  >
                    <img src={loginLogo} alt='file' style={{ maxWidth: 160, marginRight: 10 }} />
                    <Button size={'small'}>{formatMessage({ id: 'appearanceSettings.left.chooseFile' })}</Button>
                  </Upload>
                )}
                <span style={tipsStyle}>{formatMessage({ id: 'appearanceSettings.left.loginLogoSizeTip' })}</span>
              </Form.Item>
              <Form.Item label={formatMessage({ id: 'appearanceSettings.left.primaryTitle' })}>
                {getFieldDecorator('loginHeadline', {
                  rules: [{ required: true, message: formatMessage({ id: 'appearanceSettings.left.enterPrimaryTitle' }) }],
                })(<Input placeholder={formatMessage({ id: 'appearanceSettings.left.enterPrimaryTitle' })} style={{ width: 400 }} />)}
              </Form.Item>
              <Form.Item label={formatMessage({ id: 'appearanceSettings.left.secondaryTitle' })}>
                {getFieldDecorator('loginSubtitle', {
                  rules: [{ required: true, message: formatMessage({ id: 'appearanceSettings.left.enterSecondaryTitle' }) }],
                })(<Input placeholder={formatMessage({ id: 'appearanceSettings.left.enterSecondaryTitle' })} style={{ width: 400 }} />)}
              </Form.Item>
              <Form.Item label={formatMessage({ id: 'appearanceSettings.left.loginDescription' })}>
                {getFieldDecorator('loginDescription', {
                  rules: [{ required: true, message: formatMessage({ id: 'appearanceSettings.left.enterLoginDescription' }) }],
                })(
                  <Input.TextArea
                    placeholder={formatMessage({ id: 'appearanceSettings.left.enterLoginDescription' })}
                    style={{ width: 400 }}
                    autosize={{ minRows: 3, maxRows: 10 }}
                  />
                )}
              </Form.Item>
            </div>
          ) : (
            ''
          )}
        </Form>
        <Divider style={{ marginTop: 0 }} />
        <Modal
          title={formatMessage({ id: 'appearanceSettings.left.addTag' })}
          onCancel={this.siteTagCancel}
          visible={siteTagVisible}
          destroyOnClose
          footer={[
            <Button onClick={this.siteTagCancel}>{formatMessage({ id: 'appearanceSettings.left.cancel' })}</Button>,
            <Button type='primary' onClick={this.tagSubmit}>
              {formatMessage({ id: 'appearanceSettings.left.confirm' })}
            </Button>,
          ]}
        >
          <Form {...FormItemLayont}>
            <Form.Item label={formatMessage({ id: 'appearanceSettings.left.tagName' })}>
              <Input onChange={this.addTag} value={this.state.tagName} />
            </Form.Item>
          </Form>
        </Modal>
        <Modal
          title={formatMessage({ id: 'appearanceSettings.left.addQuestionLink' })}
          onCancel={this.siteTagQuestionCancel}
          visible={siteTagQuestionVisible}
          destroyOnClose
          footer={[
            <Button onClick={this.siteTagQuestionCancel}>{formatMessage({ id: 'appearanceSettings.left.cancel' })}</Button>,
            <Button type='primary' onClick={this.siteTagQuestionSubmit}>
              {formatMessage({ id: 'appearanceSettings.left.confirm' })}
            </Button>,
          ]}
        >
          <Form {...FormItemLayont}>
            <Form.Item label={formatMessage({ id: 'appearanceSettings.left.addType' })}>
              <Radio.Group onChange={this.isQuestion} value={problemsLink}>
                <Radio style={{ marginLeft: 24, marginTop: 10 }} value={1}>
                  <span>{formatMessage({ id: 'appearanceSettings.left.question' })}</span>
                  <Tooltip placement='topLeft' title={formatMessage({ id: 'appearanceSettings.left.questionTooltip' })}>
                    <Icon type='question-circle' style={{ color: '#66666666', margin: '0 2px' }} />
                  </Tooltip>
                </Radio>
                <Radio style={{ marginLeft: 35, marginTop: 10 }} value={2}>
                  <span>{formatMessage({ id: 'appearanceSettings.left.link' })}</span>
                  <Tooltip placement='topLeft' title={formatMessage({ id: 'appearanceSettings.left.linkTooltip' })}>
                    <Icon type='question-circle' style={{ color: '#66666666', margin: '0 2px' }} />
                  </Tooltip>
                </Radio>
              </Radio.Group>
            </Form.Item>
            {problemsLink == 1 ? (
              <Form.Item label={formatMessage({ id: 'appearanceSettings.left.question' })}>
                <Input onChange={this.addQuestion} value={this.state.questionName} />
              </Form.Item>
            ) : (
              ''
            )}
            {problemsLink == 2 ? (
              <>
                <Form.Item label={formatMessage({ id: 'appearanceSettings.left.linkText' })}>
                  <Input onChange={this.addLink} value={this.state.linkName} />
                </Form.Item>
                <Form.Item label={formatMessage({ id: 'appearanceSettings.left.linkAddress' })}>
                  <Input onChange={this.addLinkHref} value={this.state.linkHrefName} />
                </Form.Item>
              </>
            ) : (
              ''
            )}
          </Form>
        </Modal>
      </div>
    );
  }
}

export default Form.create()(LeftAppearance);
